<template>
    <div id='receipt'>
        <div class="cont">
            <el-card class="box-card" >
                <div class="inp">
                    <span>手机号:</span>
                    <el-input  placeholder="输入手机号查询" v-model="tel"></el-input>
                </div>
                <div class="inp">
                    <span>客户姓名:</span>
                    <el-input  placeholder="输入姓名查询" v-model="name"></el-input>
                </div>               
                <el-date-picker                        
                      type="daterange"
                      range-separator="至"
                      format="yyyy-MM-dd"
                      @change="pickTime"
                      v-model="birthdayName"
                      value-format="yyyy-MM-dd"
                      start-placeholder="还款开始时间"
                      end-placeholder="还款结束时间">
                </el-date-picker>
                <div class="inp">
                    <span>还款方式:</span>
                     <el-select v-model="selectValue" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                </div> 
                <el-button type="primary" size="small" class="search" @click="search">查询</el-button>
                <el-button type="primary" size="small" class="goout" @click="goout">导出</el-button>
            </el-card>
            <el-card class="box-card boxcatwo">
                <el-table
                    :data="dataArr"
                    stripe
                    style="width: 100%">
                    <el-table-column
                      prop="lend_code"
                      label="订单编号"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="phone"
                      label="手机号"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="客户姓名">
                    </el-table-column>
                    <el-table-column
                      :formatter="ccn"
                      prop="lend_amount"
                      label="应还本金">
                    </el-table-column>
                    <el-table-column
                      :formatter="ccn"
                      prop="service_amount"
                      label="应还服务费">
                    </el-table-column>
                    <el-table-column
                      :formatter="ccn"
                      prop="repay_amount"
                      label="实际还款金额">
                    </el-table-column>
                    <el-table-column
                      prop="overdue_fee"
                      :formatter="ccn"
                      label="逾期费">
                    </el-table-column>
                    <el-table-column
                      :formatter="ccn"
                      prop="remission_amount"
                      label="滞纳金减免">
                    </el-table-column>
                    <el-table-column
                      :formatter="ccn"
                      prop="real_extend_amount"
                      label="展期总额">
                    </el-table-column>
                    <el-table-column
                      prop="repay_type"
                      label="还款方式">
                    </el-table-column>
                    <el-table-column
                      prop="need_repay_time"
                       :formatter="dateFormat1"
                      label="应还时间">
                    </el-table-column>
                    <el-table-column
                      prop="repay_time"
                       :formatter="dateFormat"
                      label="实际还款时间"
                      width="200">
                    </el-table-column>
                </el-table>
                 <!--  <table>
                   <thead class="table-list__head">
                       <tr>
                           <th>订单编号</th>
                           <th>手机号</th>
                           <th>客户姓名</th>
                           <th>应还本金</th>
                           <th>应还服务费</th>
                           <th>实际还款金额</th>
                           <th>逾期费</th>
                           <th>滞纳金减免</th>
                           <th>展期总额</th>
                           <th>还款方式</th>
                           <th>应还时间</th>
                           <th>实际还款时间</th>
                       </tr>
                   </thead>
                   <tbody class='table-list__body have-border'>
                       <tr v-for='item in dataArr'>
                           <td>{{ item.lend_code }}</td>
                           <td>{{ item.phone }}</td>
                           <td>{{ item.name }}</td>
                           <td>{{ item.lend_amount }}</td>
                           <td>{{ item.service_amount }}元</td>
                           <td>{{ item.repay_amount  }}</td>
                            <td>{{ item.overdue_fee  }}</td>
                           <td>{{ item.remission_amount  }}</td>
                           <td>{{ item.real_extend_amount }}</td>
                           <td>{{ item.repay_type  }}</td>
                           <td>{{ item.need_repay_time }}元</td>
                           <td>{{ item.repay_time }}</td>
                           
                       </tr>
                   </tbody>
                                 </table> -->
                 <el-pagination v-show="dataArr!=''" class="pan" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[12,50, 100, 200]" :page-size="12" layout="total, sizes, prev, pager, next, jumper"
                  :total='total' :background="true">
                </el-pagination>
            </el-card>
        </div>
        <!-- -->
        
    </div>
</template>
<script>
import  { mapGetters, mapActions }  from 'vuex'
import moment from 'moment'
import toYuan from '../filters/filter-toYuan'
import Storage from '../utils/storage'
import { receiptApi , financialApi}from '../api/api'
export default{

    data(){
        return{
            selectValue:"2",
            msgArr:[],
            total:400,
            totalPage:1,
            session:"",
            pageIndex:1,
            pageSize:12,
            lendTimeFrom:"",
            lendTimeTo:"",
            currentPage:1,
            dataArr:[],
            birthdayName:"",
            tel:"",
            name:"",
            lendTimeFrom:"",
            lendTimeTo:"",
            datetime:"",
            datetime1:"",
            options: [{
              value: '1',
              label: '支付宝'
            }, {
              value: '2',
              label: '银行卡'
            }, {
              value: '3',
              label: '其他'
            }],
        }
    },
    methods:{
        handleSizeChange(val){
            console.log(`每页 ${val} 条`);
            this.pageSize=val;
            this.init();
        },
        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
            this.pageIndex=val;
            this.init();
        },
        pickTime(data){
            console.log(data)
            if(data){
              this.lendTimeFrom=data[0]
              this.lendTimeTo=data[1]
            }else{
              this.lendTimeFrom=""
              this.lendTimeTo=""
            }
            
        },
        dateFormat:function(row, column) { 
        var date = row[column.property]; 
         if (date == undefined) { 
           return ""; 
         } 
         return moment(date).format("YYYY-MM-DD HH:mm:ss"); 
      }, 
      dateFormat1:function(row, column) { 
        var date = row[column.property]; 
         if (date == undefined) { 
           return "--"; 
         } 
         return moment(date).format("YYYY-MM-DD"); 
      }, 
        init(){
          let params={
            sessionId:this.session,
            pageIndex:this.pageIndex,
            pageSize:this.pageSize,
            repayTimeFrom:this.lendTimeFrom,
            repayTimeTo:this.lendTimeTo,
            phone:this.tel,
            name:this.name,
            repayType:this.selectValue
          }
          receiptApi.receiptAjax(params)
          .then(data =>{
            let arr=[];
            this.total=data.totalCount;
            this.msgArr=data.records;
            //console.log(this.msgArr)
            $.each(this.msgArr,function(i,j){
                if(j.columns.repay_type==2){
                    j.columns.repay_type="银行卡"
                }
                if(j.columns.repay_type==1){
                    j.columns.repay_type="支付宝"
                }
                if(j.columns.repay_type==3){
                    j.columns.repay_type="其他"
                }
                if(j.columns.repay_type==null){
                    j.columns.repay_type="--"
                }
               arr.push(j.columns)
            })
            this.totalPage=data.totalPage;
            this.dataArr=arr;
          })
        },
        search(){
            if(this.datetime1!=""){
              if((new Date().getTime())-(this.datetime)>2000){
                  this.pageIndex=1;
                  this.init();
              }
            }else{
                this.pageIndex=1;
                this.init();
            }
            this.datetime=new Date().getTime();
        },
        goout(){
            if(this.datetime!=""){
              if((new Date().getTime())-(this.datetime)>2000){
                  this.gooutFn()
              }
            }else{
                this.gooutFn()
            }
            this.datetime=new Date().getTime();
        },
        gooutFn(){
            let params={
                  sessionId:this.session,
                  pageIndex:this.pageIndex,
                  pageSize:this.pageSize,
                  repayType:this.selectValue,
                  lendTimeFrom:this.lendTimeFrom,
                  lendTimeTo:this.lendTimeTo,
                }
                receiptApi.downLendDueDataList(params)
                .then(data =>{
                  window.location.href=data.downloadUrl
                })
        },
        ccn(row, column, cellValue){
          if(cellValue!=0){
             return (cellValue/100)
          }else{
            return cellValue
          }
        }
    },
    mounted(){
      
      this.session=Storage.get('51SjdAdmin_sessionId')
       this.init();
    },
    created(){
      
    },
}
</script>
<style>
  
    .el-select{
      width:150px!important;
      border-radius: 4px!important;
      -webkit-border-radius: 4px!important;
    }
</style>
<style lang="scss" scoped>
@import "../sass/variables";

    @import "../sass/extends";
    @import "../sass/mixins";
@media screen and (max-width:1500px) {
    .el-card__body{
        -webkit-transform:scaleZ(.5);
           -moz-transform:scaleZ(.5);
            -ms-transform:scaleZ(.5);
             -o-transform:scaleZ(.5);
                transform:scaleZ(.5);
                overflow-x:hide;
    }
} 
    // .pan,.el-pagination{
    //     float: right;
    //     width: 570px!important;
    //   }
    .pan{
        margin-top:20px;
    }
    .el-pager li.active+li{
        border-left:1px solid #dcdfe6;
    }
    .el-pager .number{
        border:1px solid #dcdfe6;
        margin-right:6px;
    }
   .el-input{
    width:140px!important;
    height:32px;
    border-radius: 4px!important;
   }
   .el-range-editor .el-input__inner{
        width:200px!important;
        height:32px!important;
        line-height: 32px!important;
}
    .el-input .el-input__inner{
         height:32px!important;
        line-height: 32px!important;
    }
    .el-date-editor .el-range-separator{
        line-height: 24px!important;
    }
    .el-date-editor .el-range__icon{
            line-height: 24px!important;
    }
    .el-range-editor .el-input__inner .el-input__inner{
          height:32px!important;
        line-height: 32px!important;
    }
 .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner{
    width:270px!important;
   height: 32px;
    line-height:32px;
 }
    input[type="text"]{
        border-radius: 4px!important;
    }
    .el-pagination .el-select .el-input{
        width:100px!important;
        margin-right:20px!important;
    }
    .el-pagination__editor.el-input .el-input__inner{
        width:80px;
        height:34px!important;
    }
   .inp{
    //float:left;
    display:inline-block;
    margin-right:6px;
    color:#4a4a4a;
    span{
        margin-right:5px;
    }
   }
   .search{
        margin-left:20px;
        position: relative;

    }
    .out{
        position: relative;
    }
    .boxcatwo{
        min-height:300px;
        margin-top:20px;
    }
</style>